<template>
	<div class="allcontainer">
		<div class="left">
			<el-row v-if="singleQuestionList.length > 0">
				<el-col>
					<span>单选题</span>
				</el-col>
				<button v-for="itemsigle, itemsiglecount in singleQuestionList" :key="itemsiglecount" class="forbutton"
					@click="changeQuestion(itemsiglecount + 1, 0)"
					:style="{'background-color':itemsigle.color,'color':itemsigle.fontcolor}">
					{{ itemsiglecount + 1}}
				</button>
			</el-row>
			<el-row v-if="trueOrFalseQuestionLIst.length > 0">
				<el-col>
					<span>判断题</span>
				</el-col>
				<button v-for=" itemTrueFalse, itempdcount in trueOrFalseQuestionLIst" :key="itempdcount"
					class="forbutton" @click="changeQuestion(itempdcount + 1, 1)"
					:style="{'background-color':itemTrueFalse.color,'color':itemTrueFalse.fontcolor}">
					{{ itempdcount + singleQuestionList.length + 1 }}
				</button>
			</el-row>
			<el-row v-if="moreQuestionList.length > 0">
				<el-col>
					<span>多选题</span>
				</el-col>
				<button v-for="itmemore,itemmorecount in moreQuestionList" :key="itemmorecount" class="forbutton"
					@click="changeQuestion(itemmorecount + 1, 2)"
					:style="{'background-color':itmemore.color,'color':itmemore.fontcolor}">
					{{ itemmorecount + trueOrFalseQuestionLIst.length + singleQuestionList.length + 1}}
				</button>
			</el-row>
			<el-row v-if="caseQuestionList.length > 0">
				<el-col>
					<span>案例分析</span>
				</el-col>
				<button v-for="itemCase, itemcasecount in caseQuestionList" :key="itemcasecount" class="forbutton"
					@click="changeQuestion(itemcasecount + 1, 3)"
					:style="{'background-color':color[itemcasecount],'color':colorfont[itemcasecount]}">
					{{itemcasecount + trueOrFalseQuestionLIst.length + singleQuestionList.length + moreQuestionList.length + 1 }}
				</button>
				<!-- :style="{'background-color':color[itemcasecount],'color':colorfont[itemcasecount]}" -->
			</el-row>
		</div>
		<div class="right">
			<div class="right-top">
				<p
					v-if="Math.floor(endtimenew / 3600)>=0||Math.floor((endtimenew%3600)/60)>=0||Math.floor(endtimenew % 60)>=0">
					考试剩余时间：{{answerStat.surplusTime}}</p>
				<p
					v-if="Math.floor(endtimenew / 3600)<0&&Math.floor((endtimenew%3600)/60)<0&&Math.floor(endtimenew % 60)<0">
					考试剩余时间：0:0:0</p>
			</div>
			<br />
			<div class="right-centerr">
				<!-- 单选题 -->
				<el-row v-if="selectQuestionType == 0&&singleQuestionList.length>0">
					<el-col style="text-align: left; margin-left: 5px">{{ singleQuestionList[questionIndex].content }}
					</el-col>
					<el-col style="text-align: left; margin-left: 40px">
						<el-radio-group v-model="singleQuestionSelected[questionIndex]">
							<el-radio v-for="(
                  singleQuestionListxz, singleQuestionListindex
                ) in singleQuestionList[questionIndex].optionList" :key="singleQuestionListindex"
								:label="singleQuestionListxz.value"
								@change="singleSelectedChange(singleQuestionList[questionIndex].id)"
								:disabled="singleQuestionListxz.disabled">
								{{ singleQuestionListxz.value }}:{{ singleQuestionListxz.name }}
							</el-radio>
						</el-radio-group>
						<p v-if="singleQuestionList[questionIndex].ischeck"
							:style="{'color':singleQuestionList[questionIndex].color}">
							{{ singleQuestionList[questionIndex].answerinfo }}
						</p>
					</el-col>
				</el-row>

				<!-- 判断题 -->
				<el-row v-if="selectQuestionType == 1">
					<el-col style="text-align: left; margin-left: 5px">
						{{ trueOrFalseQuestionLIst[questionIndex].content }}
					</el-col>
					<el-col style="text-align: left; margin-left: 40px">
						<el-radio-group v-model="pdQuestionSelected[questionIndex]">
							<el-radio v-for="(
                  pdquestionlistxz, pdquestionlistindex
                ) in trueOrFalseQuestionLIst[questionIndex].optionList" :key="pdquestionlistindex"
								:label="pdquestionlistxz.value"
								@change="pdSelectedChange(trueOrFalseQuestionLIst[questionIndex].id)"
								:disabled="pdquestionlistxz.disabled">
								{{ pdquestionlistxz.value }}:{{ pdquestionlistxz.name }}
							</el-radio>
						</el-radio-group>
						<p v-if="trueOrFalseQuestionLIst[questionIndex].ischeck"
							:style="{'color':trueOrFalseQuestionLIst[questionIndex].color}">
							{{ trueOrFalseQuestionLIst[questionIndex].answerinfo }}
						</p>
					</el-col>

				</el-row>

				<!-- 多选题 -->
				<el-row v-if="selectQuestionType == 2">
					<el-col style="text-align: left; margin-left: 5px">
						{{ moreQuestionList[questionIndex].content }}
					</el-col>
					<el-col style="text-align: left; margin-left: 40px">
						<el-checkbox-group v-model="moreQuestionSelected[questionIndex]">
							<el-checkbox v-for="(itemmorequestion, morequestionIndex
                ) in moreQuestionList[questionIndex].optionList" :key="morequestionIndex"
								:disabled="itemmorequestion.disabled" :label="itemmorequestion.value">
								{{ itemmorequestion.value }}:{{ itemmorequestion.name }}
							</el-checkbox>
						</el-checkbox-group>
						<p v-if="moreQuestionList[questionIndex].ischeck"
							:style="{'color':moreQuestionList[questionIndex].color}">
							{{ moreQuestionList[questionIndex].answerinfo }}
						</p>
					</el-col>

					<el-col style="margin-left:-40px;">
						<el-button style="margin-top:20px;" v-if="!moreQuestionList[questionIndex].ischeck"
							class="preornext" size="mini" @click="moreSelectedEmit(moreQuestionList[questionIndex].id)">
							确认提交
						</el-button>
					</el-col>
				</el-row>

				<!-- 案例分析题  -->
				<el-row v-if="selectQuestionType == 3">
					<el-col style="text-align: left; margin-left: 5px">
						{{ currentCaseQuestion.content }}
					</el-col>
					<el-col style="text-align: left; margin-left: 40px"
						v-for="(item1, childQ) in currentCaseQuestion.children" :key="childQ">
						<p>{{ item1.content }}</p>

						<template v-if="item1.typeName == '单选题' || item1.typeName == '判断题'">
							<el-radio-group v-model="currentCaseSelected[childQ]">
								<el-radio v-for="(item, optionIndex) in item1.optionList" :label="item.value"
									:key="optionIndex" @change="caseAnalysisSingleChange(childQ,item1.id)"
									:disabled="item.disabled">
									{{ item.value }}:{{ item.name }}
								</el-radio>
							</el-radio-group>
							<p v-if="item1.ischeck" :style="{'color':item1.color}">{{ item1.answerinfo }}</p>
						</template>

						<template v-if="item1.typeName == '多选题'">
							<el-checkbox-group v-model="currentCaseSelected[childQ]">
								<el-checkbox v-for="(item, optionIndex) in item1.optionList" :key="optionIndex"
									:disabled="item.disabled" :label="item.value">
									{{ item.value }}:{{ item.name }}
								</el-checkbox>
							</el-checkbox-group>

							<p v-if="item1.ischeck" :style="{'color':item1.color}">{{ item1.answerinfo }}</p>
							<el-row v-if="!item1.ischeck" style="margin-left:30%">
								<el-button type="primary" style="margin-top:20px;" size="mini"
									@click="caseAnalysisMoreEmit(childQ,item1.id)" class="preornext">确认提交
								</el-button>
							</el-row>
						</template>
					</el-col>
				</el-row>

				<div class="right-bottom">
					<p v-if="singleQuestionList.length > 0">
						单选题：{{ answerStat.singleDone }}/{{ singleQuestionList.length }}
					</p>
					<p v-if="trueOrFalseQuestionLIst.length > 0">
						判断题：{{ answerStat.trueOrFalseDone }}/{{ trueOrFalseQuestionLIst.length }}
					</p>
					<p v-if="moreQuestionList.length > 0">
						多选题：{{ this.answerStat.moreDone }}/{{ moreQuestionList.length }}
					</p>
					<p v-if="caseQuestionList.length > 0">
						解析题：{{ answerStat.caseAnalysisDone }}/{{answerStat.caseAnalysisTotal}}
					</p>

					<button v-show="showPre" @click="preQuestion()" class="preornext">上一题</button>
					<button v-show="showNext" @click="nextQuestion()" class="preornext">下一题</button>
					<button @click="handpaper()" class="preornextemit">交卷</button>
				</div>
			</div>

		</div>
		<div :style="{'display': display}" class="displaydialog">
			<div class="dialog-container">
				<el-row>
					<el-col :span="24" style="text-align: center;">
						<p style="font-size: 28px;font-weight: 600;text-align: center;" :style="{'color':passcolor}">
							{{answerStat.isqualified}}</p>
					</el-col>
				</el-row>
				<el-row>
					<el-col>
						<p style="margin-top: -1%;font-size: 10px;">剩余时间{{answerStat.surplusTime}}</p>
					</el-col>
				</el-row>
				<el-row style="margin-left: 44%;">
					<el-col :span="24">
						<span style="font-weight:600;font-size:50px;"
							:style="{'color':passcolor}">{{answerStat.score}}</span>
						<span style="font-size: 20px;margin-top: 26px;" :style="{'color':passcolor}">/分</span>
					</el-col>
				</el-row>
				<el-row style="margin-left: 10%;">
					<el-col :span="5">
						<p>{{answerStat.total}} </p>
						<div style="border-right: 1px solid gray;margin-top: -15%;">
							<p> 总题数</p>
						</div>
					</el-col>
					<el-col :span="5">
						<p style="color: #0E8FFD;"> {{answerStat.right}}</p>
						<div style="border-right: 1px solid gray;margin-top: -15%;">
							<p>正确数</p>
						</div>
					</el-col>
					<el-col :span="5">
						<p style="color: #FD0E0E;">{{answerStat.error}}</p>
						<div style="border-right: 1px solid gray;margin-top: -15%;">
							<p>错题数</p>
						</div>
					</el-col>
					<el-col :span="5">
						<p style="color: #FD0E0E;">{{answerStat.total - answerStat.error - answerStat.right}}</p>
						<div style="border-right: 1px solid gray;margin-top: -15%;">
							<p>未做题</p>
						</div>
					</el-col>
				</el-row>


				<button @click="display='none'" class="buttonone">否，继续考试</button>
				<button @click="sureemitpaper()" class="buttontwo">
					是，确认交卷
				</button>
			</div>


		</div>
	</div>
</template>

<script>
	import {
		mock,
		saveMockRecord,
		saveError
	} from "../api/index.js";
	export default {
		name: "examniee",
		data() {
			return {
				trueorfalsecolor: [],
				passcolor: '#0E8FFD',
				pdcolor: '#0E8FFD',
				display: 'none',
				userId: "",
				menuId: "",

				/**
				 * all question
				 */
				groupQuestionList: [],
				/**
				 * single selected question
				 */
				singleQuestionList: [],
				singleQuestionSelected: [],
				singleQuestionResults: [],
				/**
				 * true or false question
				 */
				trueOrFalseQuestionLIst: [],
				pdQuestionSelected: [],
				pdQuestionResults: [],
				/**
				 * multi selected question
				 */
				moreQuestionList: [],
				moreQuestionSelected: [],
				moreQuestionResults: [],
				/**
				 * case question
				 */
				caseQuestionList: [],
				caseQuestionSelected: [],
				caseQuestionResults: [],
				/**
				 * current case question
				 */
				currentCaseQuestion: null,
				currentCaseSelected: null,
				/**
				 * question index
				 */
				questionIndex: 0,
				/**
				 * question type
				 * 0 single
				 * 1 true or false
				 * 2 multi 
				 * 3 case question
				 */
				selectQuestionType: 0,
				/**
				 * the number of question type 
				 * 0 single
				 * 1 true or false
				 * 2 mutil
				 * 3 case question
				 */
				realQuestionInfo: [],
				/**
				 * answer stat
				 */
				answerStat: {
					endTime: null,
					surplusTime: "",
					total: 0,
					error: 0,
					right: 0,
					score: 0,
					singleDone: 0,
					trueOrFalseDone: 0,
					moreDone: 0,
					caseAnalysisTotal: 0,
					caseAnalysisDone: 0,
					isqualified: ''
				},
				username: '',
				menuName: '',
				endtimenew: '',
				testindexcase: 0,
				color: [],
				colorfont: [],
			};
		},
		mounted() {
			if (localStorage.getItem("userId") && localStorage.getItem("menuId")) {
				this.menuId = localStorage.getItem("menuId");
				this.userId = localStorage.getItem("userId");
				this.username = JSON.parse(localStorage.getItem("name"))
				this.menuName = localStorage.getItem("menuName")
				console.log('mounted', this.menuId, this.userId, this.username);
			} else {
				this.$router.push("courcesinfo");
			}
			this.loading();
			var self = this //2*60*60
			self.answerStat.endTime = new Date().getTime() / 1000 + 2*60*60
			this.timer = setInterval(() => {
				var currentTime = new Date().getTime() / 1000
				var current = self.answerStat.endTime - currentTime
				self.endtimenew = current
				self.answerStat.surplusTime = Math.floor(current / 3600) + ":" + Math.floor((current % 3600) /
					60) + ":" + Math.floor(current % 60)
				if (current <= 0) {
					self.handpaper()
					self.sureemitpaper()
				}
			}, 1000)
		},
		beforeDestroy() {
			clearInterval(this.timer);
		},
		computed: {
			showPre() {
				if (this.questionIndex > 0) {
					return true
				} else {
					for (var type = this.selectQuestionType - 1; type >= 0; type--) {
						if (this.realQuestionInfo[type] > 0) {
							return true
						}
					}
					return false
				}
			},
			showNext() {
				if (
					this.questionIndex <
					this.realQuestionInfo[this.selectQuestionType] - 1
				) {
					return true
				} else {
					for (var type = this.selectQuestionType + 1; type < 4; type++) {
						if (this.realQuestionInfo[type] > 0) {
							return true
						}
					}
					return false
				}
			},
		},
		methods: {
			saveError(nanswer, nmenuId, nquestionId, nreply, nuserId) {
				saveError({
						error: [{
							answer: nanswer,
							menuId: nmenuId,
							questionId: nquestionId,
							reply: nreply,
							userId: nuserId
						}]
					})
					.then((res) => {
						console.log("loading", res.data)
					})
					.catch((error) => {
						console.log(this.input)
						console.log(this.password)
						this.$message({
							type: "error",
							message: error
						})

					})
			},
			sureemitpaper() {
				saveMockRecord({
						errorNum: this.answerStat.error,
						menuId: this.menuId,
						menuName: this.menuName,
						pass: this.answerStat.isqualified,
						score: this.answerStat.score,
						undoNum: this.answerStat.total - this.answerStat.error - this.answerStat.right,
						userId: this.userId,
						userName: this.username
					})
					.then((res) => {
						console.log("loading", res.data)
						this.display = 'none'
						this.$message({
							type: "success",
							message: '模拟测试结束'
						})
						this.$router.push("courcesinfo")
					})
					.catch((error) => {
						console.log(this.input)
						console.log(this.password)
						this.$message({
							type: "error",
							message: error
						})
					})
			},
			handpaper() {
				this.display = 'block'
				var isqualified = this.answerStat.right / this.answerStat.total
				this.answerStat.score = isqualified * 100
				if (isqualified >= 0.7) {
					this.answerStat.isqualified = '恭喜你考试合格！'
					this.passcolor = '#0E8FFD'
				} else if (isqualified == 1) {
					this.answerStat.isqualified = '恭喜你考试满分！'
					this.passcolor = 'green'
				} else if (isqualified < 0.7) {
					this.answerStat.isqualified = '很遗憾，考试不合格！'
					this.passcolor = '#FD0E0E'
				}
				console.log(isqualified)
				this.answerStat.score = Math.floor(parseInt((this.answerStat.score) * 10) / 10)
			},
			preQuestion() {
				if (this.questionIndex > 0) {
					this.changeQuestion(this.questionIndex, this.selectQuestionType);
				} else {
					for (var type = this.selectQuestionType - 1; type >= 0; type--) {
						if (this.realQuestionInfo[type] > 0) {
							this.changeQuestion(this.realQuestionInfo[type], type);
							break;
						}
					}
				}
			},
			nextQuestion() {
				if (
					this.questionIndex <
					this.realQuestionInfo[this.selectQuestionType] - 1
				) {
					this.changeQuestion(this.questionIndex + 2, this.selectQuestionType);
				} else {
					for (var type = this.selectQuestionType + 1; type < 4; type++) {
						if (this.realQuestionInfo[type] > 0) {
							this.changeQuestion(1, type);
							break;
						}
					}
				}
			},
			changeQuestion(index, questionType) {
				if (questionType == 2) {
					var question = this.moreQuestionList[index - 1];
					if (this.moreQuestionSelected[index - 1] == null) {
						this.moreQuestionSelected[index - 1] = [];
					}
				} else if (questionType == 3) {
					var question = this.caseQuestionList[index - 1];
					if (this.caseQuestionSelected[index - 1] == null) {
						this.caseQuestionSelected[index - 1] = [];
						this.caseQuestionResults[index - 1] = []
						for (var c = 0; c < question.children.length; c++) {
							if (
								question.children[c].typeName == "单选题" ||
								question.children[c].typeName == "判断题"
							) {
								this.caseQuestionSelected[index - 1][c] = "";

							} else if (question.children[c].typeName == "多选题") {
								this.caseQuestionSelected[index - 1][c] = [];

							}
						}
					}

					this.currentCaseQuestion = question;
					this.currentCaseSelected = this.caseQuestionSelected[index - 1];
					this.testindexcase = index
				}

				this.selectQuestionType = questionType;
				this.questionIndex = index - 1;
			},
			singleSelectedChange(questionId) {
				var question = this.singleQuestionList[this.questionIndex];
				if (
					this.singleQuestionSelected[this.questionIndex].toUpperCase() ==
					question.answerList[0].toUpperCase()
				) {
					this.singleQuestionResults[this.questionIndex] = true;
					this.answerStat.right++;
					this.$set(question, "answerinfo", "回答正确");
					this.$set(question, "color", '#0E8FFD');
					this.$set(question, "fontcolor", 'white');
				} else {
					this.singleQuestionResults[this.questionIndex] = false;
					this.answerStat.error++;
					this.$set(question, "answerinfo", "正确答案:" + question.answerList[0])
					this.$set(question, "color", '#FD0E0E');
					this.$set(question, "fontcolor", 'white');
					this.saveError(question.answerList[0], this.menuId, questionId, this.singleQuestionSelected[this
						.questionIndex], this.userId)
				}

				this.answerStat.singleDone++;
				this.$set(question, "ischeck", true);
				question.optionList.forEach((item) => {
					item.disabled = true;
				});

			},
			pdSelectedChange(questionId) {
				var question = this.trueOrFalseQuestionLIst[this.questionIndex];
				if (
					this.pdQuestionSelected[this.questionIndex].toUpperCase() ==
					question.answerList[0].toUpperCase()
				) {
					this.pdQuestionResults[this.questionIndex] = true;
					this.answerStat.right++;
					this.$set(question, "answerinfo", "回答正确");
					this.$set(question, "color", '#0E8FFD');
					this.$set(question, "fontcolor", 'white');
				} else {
					this.pdQuestionResults[this.questionIndex] = false;
					this.answerStat.error++;
					this.$set(question, "answerinfo", "正确答案:" + question.answerList[0])
					this.$set(question, "color", '#FD0E0E');
					this.$set(question, "fontcolor", 'white');
					this.saveError(question.answerList[0], this.menuId, questionId, this.pdQuestionSelected[this
						.questionIndex], this.userId)

				}

				this.answerStat.trueOrFalseDone++;
				this.$set(question, "ischeck", true);
				question.optionList.forEach((item) => {
					item.disabled = true;
				});

			},
			moreSelectedEmit(questionId) {
				var question = this.moreQuestionList[this.questionIndex];

				var checkchangedata = this.moreQuestionSelected[this.questionIndex].sort();
				var answerList = question.answerList.sort();

				var answer = answerList.toString().toUpperCase();
				var checked = checkchangedata.toString().toUpperCase();
				console.log('moreQuestionSelected', this.moreQuestionSelected)

				if (checked == answer) {
					this.answerStat.right++;
					this.moreQuestionResults[this.questionIndex] = true;
					this.$set(question, "answerinfo", "回答正确");
					this.$set(question, "color", '#0E8FFD');
					this.$set(question, "fontcolor", 'white');
					console.log('checked1', checked, answer)
				} else {
					this.answerStat.error++;
					this.moreQuestionResults[this.questionIndex] = false;
					this.$set(question, "answerinfo", "正确答案:" + answer)
					this.$set(question, "color", '#FD0E0E');
					this.$set(question, "fontcolor", 'white');
					this.saveError(answer, this.menuId, questionId, checked, this.userId)
					console.log('checked', checked, answer)
				}

				this.answerStat.moreDone++;
				this.$set(question, "ischeck", true);
				question.optionList.forEach((item) => {
					item.disabled = true;
				});

			},
			caseAnalysisSingleChange(childQ, questionId) {
				var question = this.caseQuestionList[this.questionIndex].children[childQ];

				if (
					this.currentCaseSelected[childQ].toUpperCase() !=
					question.answerList[0].toUpperCase()
				) {
					this.answerStat.error++;
					this.caseQuestionResults[this.questionIndex][childQ] = false;
					this.$set(question, "answerinfo", "正确答案:" + question.answerList[0]);
					this.$set(question, "color", '#FD0E0E');
					this.saveError(question.answerList[0], this.menuId, questionId, this.currentCaseSelected[childQ], this
						.userId)
				} else {
					this.answerStat.right++;
					this.caseQuestionResults[this.questionIndex][childQ] = true;
					this.$set(question, "answerinfo", "回答正确");
					this.$set(question, "color", '#0E8FFD');
				}

				this.answerStat.caseAnalysisDone++;
				this.$set(question, "ischeck", true);
				question.optionList.forEach((item) => {
					item.disabled = true;
				});
				for (var j = 0; j < this.caseQuestionList[this.questionIndex].children.length; j++) {
					for (var m = 0; m < this.caseQuestionList[this.questionIndex].children[j].optionList.length; m++) {
						if (this.caseQuestionList[this.questionIndex].children[j].optionList[m].disabled == true) {
							this.color[this.testindexcase - 1] = '#0E8FFD'
							this.colorfont[this.testindexcase - 1] = 'white'
						} else {
							this.color[this.testindexcase - 1] = '#FD8C27'
							this.colorfont[this.testindexcase - 1] = 'white'
						}
					}
				}

			},
			caseAnalysisMoreEmit(childQ, questionId) {
				var question = this.caseQuestionList[this.questionIndex].children[childQ];

				var checkchangedata = this.currentCaseSelected[childQ].sort();
				var answerList = question.answerList.sort();

				var answer = answerList.toString().toUpperCase();
				var checked = checkchangedata.toString().toUpperCase();

				if (checked == answer) {
					this.answerStat.right++;
					this.caseQuestionResults[this.questionIndex][childQ] = true;
					this.$set(question, "answerinfo", "回答正确");
					this.$set(question, "color", '#0E8FFD');
				} else {
					this.answerStat.error++;
					this.caseQuestionResults[this.questionIndex][childQ] = false;
					this.$set(question, "answerinfo", "正确答案:" + answer);
					this.$set(question, "color", '#FD0E0E');
					this.saveError(answer, this.menuId, questionId, checked, this.userId)
				}

				this.answerStat.caseAnalysisDone++;
				this.$set(question, "ischeck", true);
				question.optionList.forEach((item) => {
					item.disabled = true;
				});
				for (var j = 0; j < this.caseQuestionList[this.questionIndex].children.length; j++) {
					for (var m = 0; m < this.caseQuestionList[this.questionIndex].children[j].optionList.length; m++) {
						if (this.caseQuestionList[this.questionIndex].children[j].optionList[m].disabled == true) {
							this.color[this.testindexcase - 1] = '#0E8FFD'
							this.colorfont[this.testindexcase - 1] = 'white'
						} else {
							this.color[this.testindexcase - 1] = '#FD8C27'
							this.colorfont[this.testindexcase - 1] = 'white'
						}
					}
				}
			},
			loading() {
				mock({
						menuId: this.menuId,
						userId: this.userId,
					})
					.then((res) => {
						console.log("loading", res.data);
						if (res.data.code === 0) {
							this.groupQuestionList = res.data.data;
							for (var i = 0; i < this.groupQuestionList.length; i++) {
								if (this.groupQuestionList[i].group == "单选题") {
									this.singleQuestionList = this.groupQuestionList[i].questionList;
									continue;
								}
								if (this.groupQuestionList[i].group == "判断题") {
									this.trueOrFalseQuestionLIst = this.groupQuestionList[i].questionList;
									continue;
								}
								if (this.groupQuestionList[i].group == "多选题") {
									this.moreQuestionList = this.groupQuestionList[i].questionList;
									continue;
								}
								if (this.groupQuestionList[i].group == "案例分析题") {
									this.caseQuestionList = this.groupQuestionList[i].questionList;
									continue;
								}
							}

							this.answerStat.caseAnalysisTotal = 0;
							if (this.caseQuestionList != null) {
								for (var i = 0; i < this.caseQuestionList.length; i++) {
									this.answerStat.caseAnalysisTotal += this.caseQuestionList[i].children.length;
								}
							}

							this.answerStat.total = this.answerStat.caseAnalysisTotal;
							this.realQuestionInfo[0] = this.singleQuestionList.length;
							this.answerStat.total += this.singleQuestionList.length;
							this.realQuestionInfo[1] = this.trueOrFalseQuestionLIst.length;
							this.answerStat.total += this.trueOrFalseQuestionLIst.length;
							this.realQuestionInfo[2] = this.moreQuestionList.length;
							this.answerStat.total += this.moreQuestionList.length;
							this.realQuestionInfo[3] = this.caseQuestionList.length;

							this.selectQuestionType = -1
							if (this.singleQuestionList.length > 0) {
								this.selectQuestionType = 0
							} else if (this.trueOrFalseQuestionLIst.length > 0) {
								this.selectQuestionType = 1
							} else if (this.moreQuestionList.length > 0) {
								this.selectQuestionType = 2
							} else if (this.caseQuestionList.length > 0) {
								this.selectQuestionType = 3
							}

							console.log("singleQuestionList", this.singleQuestionList)
							console.log("trueOrFalseQuestionLIst", this.trueOrFalseQuestionLIst)
							console.log("moreQuestionList", this.moreQuestionList)
							console.log("caseQuestionList", this.caseQuestionList)
						} else {
							this.selectQuestionType = -1
							this.$message({
								type: "error",
								message: res.data.msg
							});
						}
					})
					.catch((error) => {
						console.log(this.input)
						console.log(this.password)
						this.$message({
							type: "error",
							message: error
						})
					})
			},
			// quit() {
			// 	this.$router.push("/");
			// },
		},
	};
</script>

<style scoped>
	.allcontainer {
		position: relative;
		width: 94%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 60px;
		margin-bottom: 0;
		border: 3px solid skyblue;
	}

	.left {
		position: relative;
		width: 30%;
		border-right: 3px solid skyblue;
		margin: 0;
	}

	.right {
		position: absolute;
		width: 70%;
		right: 0;
		left: 30%;
		top: 0px;
	}

	span {
		float: left;
		font-size: 25px;
		margin-bottom: 5px;
		margin-top: 5px;
	}

	.forbutton {
		width: 19%;
		height: 40px;
		margin: 0;
		float: left;
		margin-bottom: 5px;
		margin-left: 3px;
		border-radius: 15px;
		background-color: #D1E9FE;

	}

	.right-top {
		width: 100%;
		margin: auto;
		margin-top: 0;
		border-bottom: 3px solid skyblue;
	}

	.right-centerr {
		float: left;
		overflow-y: auto;
		overflow-x: hidden;
		max-height: 550px;
		min-width: 100%;
		margin: 0;
	}

	.right-bottom {
		float: left;
		display: inline-block;
		margin-left: 8%;
		margin-top: 5%;
		width: 90%;
		height: 50px;
	}

	.right-bottom p {
		float: left;
		margin-right: 5%;
	}

	.right-bottom button {
		float: left;
		margin-right: 4%;
		margin-top: 2%;
	}

	.bg {
		background-color: #409EFF;
	}


	.displaydialog {
		position: absolute;
		width: 50%;
		height: 400px;
		top: 20%;
		left: 35%;
		z-index: 5;
		border-radius: 20px;
		background-color: #D1E9FE;
	}

	.dialog-container {
		width: 80%;
		height: 320px;
		margin-top: 40px;
		margin-left: 10%;
		background-color: white;
		border-radius: 50px;
		text-align: center;
	}

	.buttonone {
		background-color: white;
		border: 1px solid #0E8FFD;
		height: 30px;
		color: #0E8FFD;
		margin-left: 40%;
		margin-top: 20px;
		margin-right: 20px;
		font-size: 18px;
		border-radius: 13.5px;
	}

	.buttontwo {
		background-color: #0E8FFD;
		border: 1px solid #0E8FFD;
		height: 30px;
		color: white;
		margin-right: 30px;
		font-size: 18px;
		border-radius: 13.5px;
	}

	.preornext {
		background-color: #469DED;
		border: 1px solid #FD8C27;
		color: white;
		margin-top: -8%;
		width: 75px;
		border-radius: 5px;
	}

	.preornextemit {
		background-color: #FD8C27;
		border: 1px solid #469DED;
		color: white;
		margin-top: -8%;
		width: 65px;
		border-radius: 5px;
	}
</style>
